<template >
  <div class="all">
    <div style="padding-top: 60px;padding-left: 60px;">
      <el-row style :gutter="20">
          
     
        <el-col :span="2" :offset="1">
          <div class="grid-content">视频</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content">专栏</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content">用户</div>
        </el-col>
      
      </el-row>
      <el-divider></el-divider>
      <ul  class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
        <li  v-for="i in videoList" :key="i.videoId" class="list-item" style="float:left;">
          <videoevery :video="i" />
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="getVideoList"
        @current-change="getVideoList"
        :current-page.sync="currentPage"
        :page-sizes="[5,15,50, 100,200,500]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import videoevery from "@/views/index/video";
export default {
  name: "search",
  data() {
    return {
      videoTitle: this.$route.params.videoTitle,
      total: 0, //总记录条数
      currentPage: 1,
      pageSize: 16,
      videoList: ""
    };
  },
  components: {
    videoevery
  },
  created() {
    this.getVideoList();
  },
  methods: {
    getVideoList() {
      this.axios({
        method: "get",
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          videoTitle: this.videoTitle,
          partId:'',
        },
        url: "http://localhost:8094/video/getPageVideo"
      })
        .then(res => {
          this.videoList = res.data.records;
          console.log("this.videoList", this.videoList);
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
.list-item {
  padding: 8px;
}
.list {
  width: 1349px;
  padding-left: 58px;
  padding-top: 20px;
}
.pagination {
  padding: 20px;
  padding-bottom: 100px;
  position: absolute;
  left: 30%;
  top: 1200px;
}
.grid-content {

  font-size: 20px;
}
.all{
    background-color: rgb(248, 248, 248);
}
</style>